<template>
  <div class="onDemandModal">
    <div class="onDemandModal_box">
      <img src="./../assets/icon-mango.png" class="img" alt="" />
      <div class="title">{{ demandDetails.resourceName }}</div>
      <div class="sub_title">
        {{ demandDetails.companyName }}
        <span v-if="demandDetails.creator"> - {{ demandDetails.creator }}</span>
      </div>
      <div
        :class="['btn', !demandDetails.canPlay ? 'disabled' : '']"
        @click="onDianbo(demandDetails.canPlay)"
      >
        点播
      </div>
      <div class="demand_num" v-if="demandDetails.canPlay">
        当前点播&nbsp;&nbsp;{{ demandDetails.queueCount }}&nbsp;&nbsp;首
      </div>
      <div class="demand_num" v-if="!demandDetails.canPlay">
        当前待播&nbsp;&nbsp;{{
          demandDetails.queueCount
        }}&nbsp;&nbsp;首,稍后可点播
      </div>
      <div class="close" @click="closeDemand"></div>
    </div>

    <Tips :message="message" v-if="message" />
  </div>
</template>
<script>
import axios from "axios";
import { useStore } from "vuex";
import { reactive, computed } from "vue";
export default {
  name: "onDemandModal",
  props: ["id"],
  setup(props) {
    const id = props.id;
    const disabled = false;
    const store = useStore();
    let message = "";
    const state = store.state;
    const demandDetails = computed(() => {
      return state.demandDetails;
    });
    const getNum = () => {
      axios
        .post("/api/api/mguo/file/getDetail?id=" + id, {
          id: id,
        })
        .then((res) => {
          console.log(res, "res");
          if (res.data.msg && res.data.msg === "success") {
            store.commit("setDemandDetails", res.data.data);
          }
        });
    };
    getNum();
    const onDianbo = (status) => {
      if (!status) {
        return;
      }
      axios
        .post("/mguo/audio/dianbo", { resourceId: id, userId: state.userId })
        .then((response) => {
          if (response.data.msg && response.data.msg == "success") {
            store.commit("setDemand", false);
          } else {
            message.value = "💔 点播失败," + response.data.msg;
          }
          const timer = setTimeout(() => {
            message.value = null;
            clearInterval(timer);
          }, 2000);
        });
    };
    const closeDemand = () => {
      store.commit("setDemand", false);
    };
    return {
      id,
      disabled,
      closeDemand,
      demandDetails,
      onDianbo,
      message,
    };
  },
};
</script>
<style lang="scss" scoped>
.onDemandModal {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  &_box {
    position: absolute;
    padding-bottom: 20px;
    width: 308px;
    color: black;
    left: 50%;
    background: #fff;
    transform: translateX(-50%);
    top: 13%;
    border-radius: 8px;
    text-align: center;
    padding: 0 0 40px 0;
    .img {
      position: absolute;
      width: 240px;
      left: 50px;
      z-index: -100;
    }
    .title {
      font-size: 24px;
      line-height: 32px;
      font-weight: 600;
      margin-top: 40px;
    }
    .sub_title {
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      margin-top: 22px;
    }
    .btn {
      display: inline-block;
      width: 260px;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      background: linear-gradient(
          75.26deg,
          rgba(236, 0, 71, 1) -12.82%,
          rgba(252, 157, 103, 1) 113.38%
        ),
        rgba(255, 255, 255, 1);
      color: #fff;
      margin-top: 24px;
      border-radius: 24px;
    }
    .btn.disabled {
      color: rgba(0, 0, 0, 0.25);
      background: linear-gradient(
          90deg,
          rgba(228, 225, 221, 1) 0%,
          rgba(237, 237, 237, 1) 100%
        ),
        linear-gradient(
          75.26deg,
          rgba(236, 0, 71, 1) -12.82%,
          rgba(252, 157, 103, 1) 113.38%
        ),
        rgba(255, 255, 255, 1);
    }
    .demand_num {
      font-size: 14px;
      line-height: 16px;
      margin-top: 24px;
      color: rgba(0, 0, 0, 0.65);
    }

    .close {
      background: url(../images/icon-close.png) no-repeat;
      position: absolute;
      bottom: -50px;
      width: 38px;
      height: 38px;
      left: calc(50% - 19px);
    }
  }
}
</style>
